<template>
    <div>
        <div  class="f-fl container">
            <div  class="header f-fl el-col el-col-24 el-col-xs-24 el-col-sm-24 el-col-md-24 el-col-lg-24 el-col-xl-24">
                <com-select ref="comselect" label="设备状态"></com-select>
                <com-search ref="search" placeholder="请输入设备名称"></com-search>
            </div>
            <div  class="header f-fl el-col el-col-24 el-col-xs-24 el-col-sm-24 el-col-md-24 el-col-lg-24 el-col-xl-24">
                <com-count :cur="curAllItems" :count="count" className="add">
                    <a slot="header" @click='addRole'>添加设备</a>
                </com-count>
            </div>
            <div  class="f-fl el-col el-col-24 el-col-xs-24 el-col-sm-24 el-col-md-24 el-col-lg-24 el-col-xl-24">
                <loading v-show="!isShow"></loading>
                <table class="table" v-show="isShow">
                    <tr>
                        <td><p>设备号</p></td>
                        <td><p>设备用户名</p></td>
                        <td><p>手机号</p></td>
                        <td><p>创建时间</p></td>
                        <td><p>操作</p></td>
                    </tr>
                    <template v-for="item in curPageData">
                        <tr>
                            <td><p :title="item.uid">{{item.uid}}</p></td>
                            <td><p :title="item.username">{{item.username}}</p></td>
                            <td><p :title="item.account">{{item.account}}</p></td>
                            <td><p>{{item.create_time|toLocaleDate}}</p></td>
                            <td><p>
                                <a class="blue" @click="bindRail(item)">绑定电子围栏</a>
                                <a class="blue" @click="goWarns(item)">告警记录</a>
                            </p></td>
                        </tr>
                    </template>
                </table>
            </div>
            <div  class="f-fl el-col el-col-24 el-col-xs-24 el-col-sm-24 el-col-md-24 el-col-lg-24 el-col-xl-24">
                <turn-page :counts="count" ref='curP'></turn-page>
            </div>
        </div>

    </div>
</template>
<script>
    import comSelect from 'c/com_select/com_select_component'
    import comSearch from 'c/com_search/search'
    import comCount from 'c/com_count/count'
    import turnPage from 'c/turn_page/turn_page'
    import loading from 'c/com_loading/inline_loading'
    export default{
        data(){
            return{
                page_size:10,
                page_num:1,
                search:'',
                count:0,
                need_count:1,
                curAllItems:1,
                curPageData:[],
                isShow:false,
            }
        },
        created(){
            this.bind()
        },
        mounted(){
            this.init()
            this.getQuery()
        },
        components:{
            comSelect,
            comSearch,
            comCount,
            turnPage,
            loading,
        },
        methods:{
            bind(){
                this.$on('choose-selected-status',value=>{
                    this.status=value
                    this.$refs.curP.chilFn(1)
                    this.page_num=1
                    this.getQuery()
                })
                this.$on('choose-selected-roles-status',value=>{
                    this.father_id=value
                    this.$refs.curP.chilFn(1)
                    this.page_num=1
                    this.getQuery()
                })
                this.$on('refresh',()=>{
                   if(store.loading) store.loading.show()
                    this.getQuery()
                })
                this.$on('search',value=>{
                    this.search=value
                    this.$refs.curP.chilFn(1)
                    this.page_num=1
                    this.getQuery()
                })
                this.$on('turn-page',value=>{
                    this.page_num=value
                    this.getQuery()
                })
            },
            init(){
                this.$refs.comselect.$emit('get-selected-list',{ '启用':'active', '冻结':'disable'})
            },
            goWarns(item){
                   sessionStorage.setItem('account',item.account)
                  this.$router.push({path:'/warn/log'})
            },
            deleteRole(item){
                this.$confirm('是否确定删除'+item.uid,{
                    type:'warning',
                    showCancelButton:true,
                    closeOnClickModal:false,
                }).then(()=>{
                    this.deleteRole1(item)
                }).catch(()=>{})
            },
            deleteRole1(item){
                this.$http.post('role_manage/delete_role ',{
                    role_id:item.id
                }).then(res=>{
                    if(!res.result){
                        this.$message('操作成功')
                        this.$emit('refresh')
                    }
                })
            },
            addRole(){
                 this.$router.push({path:'/device/add'})
            },
            bindRail(item){
                this.$router.push({path:'/device/config/'+item.uid})
            },
            getQuery(){
                this.$http.get('user/get_user_list',{
                    page_size:this.page_size,
                    page_num:this.page_num,
                }).then(res=>{
                    if(!res.result){
                        this.curPageData=res.data.list
                        this.curAllItems= res.data.list.length
                        this.count=res.data.count
                        this.isShow=true
                    }
                })
            },

        }
    }
</script>
<style lang="scss" scoped>
    .container{
        font-size:14px;
        background:#fff;
        margin-left:24px;
        width:100%;
    .header{
        height:60px;
        line-height:60px;
    }

    .table{
        width:100%;
        background: #F9FAFC;
        border:0;
        font-size:14px;
        table-layout: fixed;
    tr:nth-of-type(even){
        background:#fff;
    }
    tr{
        width:100%;
        height:44px;
        line-height:44px;
        border-bottom:1px #ccc solid;
        table-layout: fixed;
    td{
    p{
        overflow:hidden;
        white-space:nowrap;
        text-overflow:ellipsis;
    }
    text-align: left;
    text-indent: 10px;
    }
    &:first-child{
    td{
        border-top: 1px solid #DDD;
        border-bottom: 1px solid #DDD;
        border-left: 1px solid #DDD;
        color: #3D5266;
        font-size:16px;
    }
    }
    td:nth-of-type(1){
    width:300px;
    p{max-width:300px;}
    }
    td:nth-of-type(2){
        width:200px;
    p{max-width:200px;}
    }
    td:nth-of-type(3){
        width:170px;
    p{max-width:170px;}
    }
    td:nth-of-type(4){
        width:240px;
    p{max-width:240px;}
    span{
        padding:1px 5px;
        border-radius: 2px;
    }
    .red{
        border: 1px solid #E33244;
        color: #E33244;
    }
    .green{
        border: 1px solid #26BF8C;
        color: #26BF8C;
    }
    }
    td:nth-of-type(5){
        width:320px;
    a{
        display:inline-block;
        text-align: center;
    }
    a:nth-of-type(2){
        margin:0 10px;
    }
    }
    }

    .blue{
        color: #3494E7;
    }
    .red{
        color: #E33244;
    }
    .gray{
        color:#888;
    }
    }
    }
</style>